<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>学生表</title>
		<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.min.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.theme.min.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="css/jqgrid/ui.jqgrid.css" />
	</head>

	<body>
		<table id="gridTable"></table>
		<div id="gridPager"></div>
	</body>
	<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
	<script src="js/jquery-ui.min.js" type="text/javascript"></script>
	<script src="js/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>
	<script src="js/jqgrid/i18n/grid.locale-cn.js" type="text/javascript"></script>
	<script type="application/javascript">
		var apiUrl = "http://127.0.0.1:8088/api/v1"
		$(function() {
			var theclass = $.ajax({
				url: apiUrl + "/theclass",
				async: false
			}).responseText;
			var thclassOjb = JSON.parse(theclass).obj;
			var selectclass = "";
			for(var obj in thclassOjb){
				if(obj>0)
					selectclass += ";";
				selectclass += thclassOjb[obj].id + ":" +thclassOjb[obj].name;
				
			}
//			console.log(selectclass);
			
			$("#gridTable").jqGrid({
				url: apiUrl + '/student',
				datatype: "json",
				colNames: ['id', '姓名', '年龄', '性别', '班级'],
				height: "auto",
				colModel: [{
					name: 'id',
					index: 'id',
					width: 200,
					hidden:true
				}, {
					name: 'name',
					index: 'name',
					width: 300,
					editable : true,
					editrules: {required:true}
				}, {
					name: 'age',
					index: 'age',
					width: 150,
					editable : true,
					editrules: {number:true,minValue:10,maxValue:100}
				},{
					name: 'sex',
					index: 'sex',
					width: 100,
					editable : true,
					edittype : "select",
					editoptions : {
						value : "男:男;女:女;秘密:秘密"
					},
				}, {
					name: 'theclass',
					index: 'theclass',
					width: 100,
					editable : true,
					edittype:"select",
					editoptions: {
						value:selectclass
					},
					formatter:function(cellvalue, options, rowObject){
						if(cellvalue == undefined)
							return "";
//							console.log(thclassOjb[cellvalue].name)
						return cellvalue.name;
					}
				}],
				rowNum: 10,
				rowList: [5,10, 20, 30],
				pager: '#gridPager',
				sortname: 'id',
				mtype: "get",
				viewrecords: true,
				sortorder: "asc",
				caption: "学生表",
				jsonReader : {
					root : "obj",
					page : "pageNum",
					total : "maxPage",
					records : "count",
					repeatitems : false
				},
				editurl : apiUrl + "/student",
				multiselect : true,
			}); 
			jQuery("#gridTable").jqGrid('navGrid', '#gridPager', {
				edit: true,
				add: true,
				del: true,
				view:true
			}, {}, {},
		    { // Delete parameters
		        mtype: "DELETE",
		        serializeDelData: function () {
		            return ""; // don't send and body for the HTTP DELETE
		        },
		        onclickSubmit: function (params, postdata) {
//		        	console.log(postdata);
		        	var ids = postdata.split(",");
					if(postdata.indexOf(",")>=0)
						params.url = apiUrl + '/student?ids=' + encodeURIComponent(ids);
		        	else
		            	params.url = apiUrl + '/student/' + encodeURIComponent(ids);
		        }
		    });
			
		});
	</script>

</html>